<template>
    <div>
        <Modal v-model="modifyModel" title="修改密码">
    
            <Form ref='modifyForm' :model="modifyForm" label-position="right" :rules="rule_data" :label-width="100" class="modifyform">
                <Form-item label="原密码" prop="orgpwd">
                    <Input type="password" v-model="modifyForm.orgpwd"></Input>
                </Form-item>
                <Form-item label="新密码" prop="newpwd">
                    <Input type="password" v-model="modifyForm.newpwd"></Input>
                </Form-item>
                <Form-item label="确认密码" prop="confirmpwd">
                    <Input type="password" v-model="modifyForm.confirmpwd"></Input>
                </Form-item>
                <Form-item label="验证码" prop="code">
                    <Input v-model="modifyForm.code" style="width: 150px;margin-right:10px;"></Input>
                    <valicode></valicode>
                </Form-item>
    
            </Form>
            <div slot="footer">
                <Button type="primary" :loading="loading" @click="modify()">
                    <span v-if="!loading">确认修改</span>
                    <span v-else>修改中...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'updatepwd',
    data() {
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.modifyForm.newpwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.modifyForm.confirmpwd !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.modifyForm.validateField('confirmpwd');
                }
                callback();
            }
        };
        return {
            loading: false,
            modifyModel: false,
            modifyForm: {
                orgpwd: '',
                newpwd: '',
                confirmpwd: '',
                code: '',
            },
            rule_data: {
                orgpwd: [
                    { required: true, message: '请输入原始密码！', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                newpwd: [
                    { required: true, message: '请输入新密码！', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                confirmpwd: [
                    { required: true, message: '请输入再次输入密码！', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码！', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        modify() {
            this.$refs['modifyForm'].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.axios.post("account/modifypwd", this.modifyForm).then((res) => {
                        if (res.errorCode == 0) {
                            this.$Message.success(res.message);
                            this.$refs['modifyForm'].resetFields();
                            this.modifyModel = false;
                        } else {
                            //this.$Message.error(res.message);
                        }
                        this.$bus.emit('changeCode');
                        this.loading = false;
                    }).catch((error) => {
                        this.loading = false;
                    })
                } else {
                    this.$Message.error('请完善您的信息!');
                }
            })
        },
        showModifyPwd() {
            this.$bus.emit('changeCode');
            this.modifyModel = true;
        }
    },
    created() {
        this.$bus.on('showModifyPwd', this.showModifyPwd);
    },
    beforeDestroy() {
        this.$bus.off('showModifyPwd', this.showModifyPwd);
    },
}
</script>
<style scoped>
.modifyform {
    padding-right: 15px;
}
</style>
